<template>
	<view>
		<cu-custom bgColor="bg-cyan" isBack>
			<block slot="content">switch 开关选择器</block>
		</cu-custom>
		<view class="smart-padding-wrap">
			<view class="text">默认样式</view>
			<view class="">
				<switch checked  @change="switchChange" />
				<switch @change="" />
			</view>
			<view class="text">CheckBox类型</view>
			<view class="">
				<switch type="checkbox" />
			</view>
			<view class="uni-title">不同颜色和尺寸的switch</view>
			<view >
				<switch style="transform: scale(0.7);" checked color="#FFCC33" @change="switchChange"/>
				<switch style="transform: scale(0.7);" color="#FFCC33" @change="switch2Change"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods:{
			switchChange(e) {
				console.log(`switch1 发生 change 事件 携带值为${e.detail.value}`);
			},
			switch2Change (e) {
				console.log(`switch2 发生 change 事件 携带值为${ e.detail.value}`);
			},
		}
	}
</script>

<style>
</style>